<template>
  <div class="container flex a-flex-start j-space-between p5">
    <aside class="left p10 fh100">
      <draggable
          class="options"
          v-model="option"
          :group="{name: 'widget', pull: 'clone'}"
          :options="options"
          :sort="false">
          <transition-group>
              <div class="item fl48 mb6" v-for="item in option" :key="item.icon">
                  {{item.type}}
              </div>
          </transition-group>
      </draggable> 
    </aside>
    <section class="full bg-light p10 fh100">
      <draggable
          class="target"
          v-model="target"
          group="widget"
          :options="options"
          :move="onTargetMove"
          @add="handleWidgetAdd">
          <transition-group>
              <div class="item" v-for="item in target" :key="item.uuid">
                  <components
                    :is="'a-'+item.type"
                    v-bind="item.options"
                  ></components>
              </div>     
          </transition-group>
      </draggable> 
    </section>
    <aside class="right fh100">{{target}}</aside>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash';
import draggable from 'vuedraggable';
import md5 from 'js-md5';
import guid from '@/utils/guid.js';
import { basicComponents } from '@/utils/componentsConfig.js'

export default {
    auth: false,
    components: {
        draggable,
    },
    data() {
      return {
          options: {
              animation: 300,
              dragClass: 'dragClass',
              ghostClass: 'ghostClass',
              chosenClass: 'chosenClass',
          },
          option: basicComponents,
          target: [] 
        }
    },
    methods: {
        handleWidgetAdd(evt) {
            const newIndex = evt.newIndex   
            //为拖拽到容器的元素添加唯一 key
            const key = guid()
            this.$set(this.target, newIndex, {
                ...this.target[newIndex],
                options: {
                ...this.target[newIndex].options,
                remoteFunc: 'func_' + key
                },
                uuid: key,
                // 绑定键值
                model: this.target[newIndex].type + '_' + key,
                rules: []
            })
        },
        onTargetMove(event, originalEvent) {
            const { draggedContext, relatedContext } = event // 备选项|目标项
            return false // 阻止移动
        },
    },
}
</script>

<style lang="less" scoped>
.container{
  height: 100%;
  .left,
  .right{
    width: 300px;
    border: 1px solid #eee;
    .options > span{
        .flex;
    }
  }
  .target > span{
      display: block;
      width: 100%;
      min-height: 30px;
  }
  section{
    border: 1px dashed #333;
  }
}

.ghostClass{
  background-color:  blue !important;
}
.chosenClass{
  background-color: red !important;
  opacity: 1!important;
}
.dragClass{
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow:none !important;
  outline:none !important;
  background-image:none !important;
}
.item{
  padding: 6px 12px;
  border: 1px solid #eee;
  background-color: #f1f1f1;
}
.item:hover{
  background-color: #fdfdfd;
  cursor: move;
}
</style>
